{% extends "website/staff/staff_base.html" %}
{% block staff_content %}
<section class="section">
  <div class="card">
    <div class="card-title">
      <div class="icon">📅</div>
      <div>
        <h1 class="h1" style="margin:0">Telehealth Slots</h1>
        <div class="small">Create and manage available consultation slots.</div>
      </div>
      <div style="margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center">
        <a class="btn" href="{% url 'website:staff_slot_create' %}">+ New Slot</a>
        <a class="btn btn-ghost" href="{% url 'website:staff_provider_list' %}">Clinicians</a>
        <a class="btn btn-ghost" href="{% url 'website:staff_slot_bulk_generate' %}">Bulk generate</a>
        <a class="btn btn-ghost" href="#" data-export="csv">Export CSV</a>
        <a class="btn btn-ghost" href="#" data-export="pdf">Export PDF</a>
      </div>
    </div>

    <div class="sep"></div>

    <form method="get" class="row" style="gap:10px;flex-wrap:wrap;align-items:flex-end">
      <input class="input" style="max-width:320px" type="text" name="q" value="{{ q|default:'' }}" placeholder="Search provider / notes" />
      <label class="small">From
        <input class="input" type="date" name="date_from" value="{{ date_from|default:'' }}">
      </label>
      <label class="small">To
        <input class="input" type="date" name="date_to" value="{{ date_to|default:'' }}">
      </label>
      <label class="small">Only available
        <select class="input" name="available">
          <option value="">All</option>
          <option value="yes" {% if available == "yes" %}selected{% endif %}>Yes</option>
          <option value="no" {% if available == "no" %}selected{% endif %}>No</option>
        </select>
      </label>
      <button class="btn" type="submit">Apply</button>
      <a class="btn btn-ghost" href="{% url 'website:staff_slot_list' %}">Reset</a>
    </form>

    <div class="sep"></div>

    <div class="table-wrap">
      <table class="table">
        <thead>
          <tr>
            <th><a class="sort-link" href="#" data-sort="date">Date <span class="sort-icon"></span></a></th>
            <th>Time</th>
            <th>Provider</th>
            <th><a class="sort-link" href="#" data-sort="is_available">Available <span class="sort-icon"></span></a></th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for s in slots %}
          <tr>
            <td>{{ s.start_at|date:"M j, Y" }}</td>
            <td class="small">{{ s.start_at|date:"g:i A" }}–{{ s.end_at|date:"g:i A" }}</td>
            <td>{{ s.provider.full_name|default:"—" }}</td>
            <td>{% if s.is_active and not s.is_full %}✅{% else %}—{% endif %}</td>
            <td class="row" style="gap:8px;flex-wrap:wrap">
              <a class="btn" href="{% url 'website:staff_slot_edit' s.id %}">Edit</a>
              <a class="btn btn-ghost" href="{% url 'website:staff_slot_delete' s.id %}">Delete</a>
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="5" class="small">No slots found.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    
<div class="row" style="justify-content:space-between;align-items:center;margin-top:12px;gap:10px;flex-wrap:wrap">
  <div class="small">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }} · {{ page_obj.paginator.count }} records</div>
  <div class="row" style="gap:6px;flex-wrap:wrap">
    {% if page_obj.has_previous %}
      <a class="btn btn-ghost" href="?{% if request.GET %}{{ request.GET.urlencode|cut:'page='|cut:'&&' }}&{% endif %}page={{ page_obj.previous_page_number }}">← Prev</a>
    {% endif %}
    {% if page_obj.has_next %}
      <a class="btn btn-ghost" href="?{% if request.GET %}{{ request.GET.urlencode|cut:'page='|cut:'&&' }}&{% endif %}page={{ page_obj.next_page_number }}">Next →</a>
    {% endif %}
  </div>
</div>

  </div>
</section>
{% endblock %}